import React, { Component } from 'react'
import menuData from '@/config/menus'
import { Menu, Icon } from 'antd'
import { Link } from 'dva/router'
import { cloneDeep } from 'lodash'

class SMenu extends Component {
  renderMenus() {
    const cloneData = cloneDeep(menuData)
    const showMenu = cloneData.filter(_=>_.show)
    const subData = showMenu.filter(_=>_.pid===null)
    subData.map((item, index) => {
      let child = showMenu.filter(_=>_.pid===item.id)
      item.child = child
      return item
    })
    return this.getMenus(subData)
  }
  getMenus(data) {
    var list = []
    data.map((item, index) => {
      if (item.child && item.child.length > 0) {
        list.push(
          <Menu.SubMenu
            key={item.id}
            title={<span><Icon type={item.icon} />{item.name}</span>}
          >
            {this.getMenus(item.child)}
          </Menu.SubMenu>
        )
      } else {
        list.push(
          <Menu.Item key={item.id}>
            <Link to={item.route || '#'}>
              {item.icon && <Icon type={item.icon} />}
              {item.name}
            </Link>
          </Menu.Item>
        )
      }
    })
    return list
  }
  render() {
    console.log('location', this.props)
    return(
      <Menu
        mode="inline"
        theme="dark"
      >
      {this.renderMenus()}
    </Menu>
    )
  }
}

export default SMenu

